<template>
  <div>
    <el-dialog v-model="props.show" title="分配角色" @close="close">
      <el-form :model="form">
        <el-form-item label="账号：" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="姓名：" :label-width="formLabelWidth">
          <el-input v-model="form.nickName" autocomplete="off" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="邮箱：" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="密码：" :label-width="formLabelWidth">
          <el-input v-model="form.password" type="password" show-password autocomplete="off" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="备注：" :label-width="formLabelWidth">
          <el-input v-model="form.note" :rows="3" type="textarea" placeholder="请输入备注" />
        </el-form-item>
        <div>
          <span style="margin: 0 40px 0 20px">是否启用</span>
          <el-radio-group v-model="radio1" class="ml-4">
            <el-radio label="1" size="large">是</el-radio>
            <el-radio label="2" size="large">否</el-radio>
          </el-radio-group>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="confirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
  
<script setup lang='ts'>
import { ref, reactive, watch, withDefaults } from 'vue';
import * as http from '@/request/api'
import EventBus from '@/utils';

// ts 父子传值 传默认值要使用 withDefaults 
const props = withDefaults(defineProps<{ show: boolean, data: AdminListResponelist }>(), { show: false })
const emit = defineEmits(['close', 'confirm'])
// 模板数据
const form = ref({} as AdminListResponelist)
watch(
  () => props.data,
  (val) => {
    form.value = { ...val }
  },
)
const radio1 = ref('0')
const formLabelWidth = '100px'
let add = false
EventBus.on("addData", () => {
  add = true
})
const addform = {} as AdminRegisteParam
// 确认编辑
async function confirm() {
  if (add) {
    addform.icon = form.value.icon
    addform.email = form.value.email
    addform.nickName = form.value.nickName
    addform.note = form.value.note
    addform.password = form.value.password
    addform.username = form.value.username
    let addRes = await http.admin.AdminRegister(addform)
    add = false
  } else {
    let updateRes = await http.admin.AdminUpdate(form.value)
  }
  emit('confirm')
}
// 关闭编辑框
function close() {
  emit('close')
}

</script>
  
<style>
</style>